<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page isELIgnored="false" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
   <title>登录</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<style>
			ul{
				list-style-type: none;
				padding: 0px;
			}
			.main-box{
				/*border:1px solid red;*/
				overflow: hidden;
			}
			.main-box .bg-photo{
				width:100%;
			}
			.content .conBox{
				width:355px;
				height:270px;
				/*border:1px solid red;*/
				position:absolute;
				right:10%;
				top:30%;
				background-color: rgba(0,0,0,0.5);
				padding:30px;
				padding-bottom:50px;
				color:white;
			}
			.title{
				font-size:20px;
				font-weight: normal;
				/*border:1px solid red;*/
				margin:0px;
				letter-spacing: 10px;
			}
			.content .conBox ul{
				/*border:1px solid blue;*/
			}
			.content .conBox ul li{
				/*border:1px solid orange;*/
				margin-bottom:20px;
				font-size:14px;
				
			}
			.content .conBox ul li:first-child{
				text-align: center;
			}
			.content .conBox ul li:last-child{
				margin:0px;
			}
			.content .conBox ul li label{
				height:40px;
				width:40px;
				display: inline-block;
				background-color:#333;
				float:left;
				
			}
			.content .conBox ul li label span{
				/*border:1px solid red;*/
				margin-top:12px;
				margin-left:13px;
			}
			.content .conBox ul li input[type="text"],.content .conBox ul li input[type="password"]{
				height:40px;
				border:none;
				width:255px;
				padding-left:10px;
				color:black;
			}
			.content .conBox ul li input[type="submit"]{
				height:40px;
				border:none;
				width:100%;
				background-color:#F89708;
				
			}
			.li_left{
				float:left;
				
			}
			.li_right{
				float:right;
				color:orangered;
			}
		</style>
		<script type="text/javascript" src="js/jquery-1.12.1.min.js" ></script>
		<script type="text/javascript" src="js/tools.js" ></script>
		<script>
			window.onload = function(){
				//获取除了导航的高度
				var height =window.innerHeight;
				
				var main = document.getElementsByClassName("main-box")[0].style.height=height+"px";
				
			}
		
		</script>
	</head>
	<body>
	<!-- 	$(function(){
				$("form").submit(function(){
					var name = $("#userName").val();
					var pass = $("#passWord").val();
					$.ax(
						"dologin",
						{"username":name,"password":pass},
						null,
						"post",
						"json",
						function(data){
						if(data){
						
						}else{
						  alert("登入失败");
						}
						},
						function(){
							alert("error");
						},
						function(){
							$("#sub").html("正在登录");
//							alert("ha");
						}
					);
					return false;
				})
			}) -->
		<div class="main-box">
			<div class="content">
				<img class="bg-photo" src="img/loginbg.jpg" />
				<div class="input-box">
					<div class="conBox">
						<form action="${pageContext.request.contextPath}/dologin" method="post">
						<ul>
							<li>
								<h1 class="title">用户登录</h1>
							</li>
							<li>
								<label for="userName"><span class="glyphicon glyphicon-user"></span></label>
								<input type="text" id="userName" name="username" placeholder="请输入用户名" required="required" />
							</li>
							<li>
								<label for="passWord"><span class="glyphicon glyphicon-lock
"></span></label>
								<input type="password" id="passWord" name="password" placeholder="请输入用户密码" required="required"  />
							</li>
							<li>
								<input type="submit" value="登录" id="sub"/>
							</li>
						</ul>
						</form>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
